<template>
<div class="suggset-container">
   <ul>
       <li v-for="(item,i) in suggestinfo" :key="i">
     <h3 class="title">{{item.title}}</h3>
     <p class="authors">{{item.authors}}</p>
     <p class="content">{{item.content}}</p>
       </li>
   </ul>
    </div>    
</template>


<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      id: this.$route.params.id,
      suggestinfo: []
    };
  },
  created() {
    this.getsuggest();
  },
  methods: {
    getsuggest() {
      this.$http
        .get("http://api.apiopen.top/getSongPoetry?page=1&count=" + this.id)
        .then(res => {
          if (res.status == 200) {
            //   console.log(res)
            this.suggestinfo = res.body.result;
            console.log(this.suggestinfo);
            this.suggestinfo.forEach(item=>{
                item.content=item.content.replace(/\|/g,"")
                console.log(item.content)
            })

          } else {
            Toast("服务器异常");
          }
        });
    }
  }
};
</script>


<style lang="less">
.suggset-container {
  width: 100%;
  padding: 0 5px;
  margin-bottom: 60px;

  ul {
    margin: 0;
    padding: 0;
    li {
      border-radius: 20px;
      border: solid 1px #ccc;
      margin: 20px 10px;
      .authors,
      .title {
        text-align: center;
        margin-top: 5px;
      }
      p {
        margin: 0;
        padding: 0;
      }

      .content {
        padding: 8px;
        text-indent: 2em;
      }

      list-style: none;
    }
  }
}
</style>
